<template>
  <!-- 房内权限加入人员 -->
  <el-dialog
    width="600px"
    custom-class="customWidth"
    center
    :before-close="closeDialog"
    title="房内权限加入人员"
    :close-on-click-modal="false"
    append-to-body
    :visible.sync="addDialogFormVisible"
    v-if="addDialogFormVisible"
    class="add"
  >
    <el-form :inline="true" :model="dataForm" ref="dataForm" class="elformcss">
      <el-form-item label="部门" prop="departmentGuid">
        <el-cascader
          size="mini"
          v-model="departmentGuid"
          :options="deptTree"
          ref="cascaderAddDept"
          placeholder="请选择部门"
          @change="handleChangeDept"
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="姓名" prop="username">
        <el-input v-model="dataForm.username" size="mini" clearable></el-input>
      </el-form-item>
      <el-form-item label="编号" prop="userNumber">
        <el-input v-model="dataForm.userNumber" size="mini" clearable></el-input>
      </el-form-item>
      <el-form-item label="卡号" prop="carnumber">
        <el-input v-model="dataForm.carnumber" size="mini" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchifo" size="mini">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :stripe="true"
      border
      :header-cell-style="headFirst"
      @selection-change="handleSelectionChange"
      :cell-style="(res) => headFirst_col(res, [])"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="userName" label="姓名"></el-table-column>
      <el-table-column prop="userNumber" label="编号"></el-table-column>
      <el-table-column prop="departmentName" label="部门"></el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChangepage"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="recordCount"
      ></el-pagination>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addvisible()">取消</el-button>
      <el-button type="primary" @click="addataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      addDialogFormVisible: false,
      dataForm: {
        username: '',
        carnumber: '',
        userNumber: ''
      },
      departmentGuid: [],
      deptTree: [],
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      recordCount: 0,
      currentPage: 1,
      searchInfo: {},
      selectarr: [],
      roomGuid: ''
    }
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  mounted() {
    this.getDeptTree()
  },
  methods: {
    closeDialog(done) {
      this.addDialogFormVisible = false
      done()
    },
    addvisible() {
      this.departmentGuid = []
      this.tableData = []
      this.$refs['dataForm'].resetFields()
      this.addDialogFormVisible = false
    },
    addataFormSubmit() {
      if (this.selectarr.length < 1) {
        this.$message({
          message: '请选择人员',
          type: 'warning'
        })
        return
      }
      this.$refs['dataForm'].resetFields()
      this.bindroomstudent()
    },
    addinit(roomGuid) {
      this.roomGuid = roomGuid
      this.pageNum = 1
      this.pageSize = 10
      this.recordCount = 0
      this.currentPage = 1
      this.addDialogFormVisible = true
    },
    handleChangeDept() {
      console.log(this.departmentGuid)
    },
    searchifo() {
      this.pageNum = 1
      this.getdepartmentinfo()
    },
    handleSelectionChange(val) {
      console.log(val)
      this.selectarr = []
      for (var i = 0; i < val.length; i++) {
        this.selectarr.push({
          cardNumber: val[i].cardNumber,
          userGuid: val[i].userGuid
        })
      }
      // console.log(this.selectarr)
    },
    //部门信息
    getDeptTree() {
      this.$http({
        url: this.$http.adornUrl('/department/select-department-tree'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: this.changeschoolid,
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data.messageContent)
          this.deptTree = data.messageContent
          this.recursiveget(this.deptTree)
          // console.log(JSON.stringify(this.deptTree));
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //递归添加
    recursiveget(deptTree) {
      for (var i in deptTree) {
        deptTree[i].value = deptTree[i].departmentGuid
        deptTree[i].label = deptTree[i].departmentName
        if (deptTree[i].children.length == 0) {
          delete deptTree[i].children
        } else {
          this.recursiveget(deptTree[i].children)
        }
      }
    },
    //获取部门简要信息
    getdepartmentinfo() {
      this.searchInfo = {}
      this.searchInfo.unitGuid = this.changeschoolid
      if (this.departmentGuid != []) {
        let departmentGuid = this.departmentGuid[this.departmentGuid.length - 1]
        this.searchInfo.departmentGuid = departmentGuid
      }
      if (this.dataForm.carnumber != '') {
        this.searchInfo.cardNumber = this.dataForm.carnumber
      }
      if (this.dataForm.username != '') {
        this.searchInfo.userName = this.dataForm.username
      }
      if (this.dataForm.userNumber != '') {
        this.searchInfo.userNumber = this.dataForm.userNumber
      }
      this.$http({
        url: this.$http.adornUrl('/department/select-department-child-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data)
          this.tableData = data.messageContent.data
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getdepartmentinfo()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.getdepartmentinfo()
    },
    //分配绑定学生
    bindroomstudent() {
      console.log(this.selectarr)
      this.$http({
        url: this.$http.adornUrl('/terminal/doorLock/empower-name-room-add'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            roomGuid: this.roomGuid,
            unitGuid: this.changeschoolid,
            userList: this.selectarr
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.departmentGuid = []
          this.tableData = []
          this.$refs['dataForm'].resetFields()
          this.$message({
            message: '绑定人员成功',
            type: 'success',
            duration: 200,
            onClose: () => {
              this.addDialogFormVisible = false
              this.$emit('refreshDataList')
            }
          })
          // console.log(JSON.stringify(this.deptTree));
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.add {
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  /deep/.el-dialog--center .el-dialog__body {
    padding: 20px;
    padding-bottom: 0px;
  }
  .el-form-item {
    margin-bottom: 5px;
  }
}
.elformcss {
  margin-bottom: 10px;
  border-bottom: 1px solid #e5e9f2;
}
.page {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>